<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
		<meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="#0A5AF9">
		<title>title</title>
		<link rel="stylesheet" type="text/css" href="../css/api.css" />
		<link rel="stylesheet" href="../css/aui.css" />
		<link rel="stylesheet" href="../css/mui.css" />
		<link rel="stylesheet" href="../css/public-head.css" />
		<link rel="stylesheet" type="text/css" href="../css/MyOrder.css" />
	</head>

	<body>
		<div class="Zhangice">
			<div class="mui-content " id="mui_content">
				<div id="nearby" class="mui-segmented-control mui-segmented-control-inverted">
					<a class="mui-control-item " href="#order1" id="1">已下单</a>
					<a class="mui-control-item " href="#order2" id="2">待完成</a>
					<a class="mui-control-item " href="#order3" id="3">待评价</a>
					<a class="mui-control-item " href="#order4" id="4">历史订单</a>
				</div>
				<div id="order1" class="mui-slider-item mui-control-content">
					<div class="developed">
						<img class="developed_img" src="../image/icon/zhanwunei@2x.png" alt="">
						<span class="developed_span">
						暂无订单~~
					</span>
					</div>
				</div>

				<div id="order2" class="mui-slider-item mui-control-content ">
					<div class="or"></div>
					<div class="developed">
						<img class="developed_img" src="../image/icon/zhanwunei@2x.png" alt="">
						<span class="developed_span">
						暂无订单~~
					</span>
					</div>
					<!-- <div style="height: 10px; background-color: #EEEEEE;"></div> -->
				</div>
				<div id="order3" class="mui-slider-item mui-control-content ">
					<div class="oe-1"></div>
					<div class="developed">
						<img class="developed_img" src="../image/icon/zhanwunei@2x.png" alt="">
						<span class="developed_span">
						暂无订单~~
					</span>
					</div>
				</div>
				<div id="order4" class="mui-slider-item mui-control-content ">
					<div class="oe-1"></div>
					<div class="developed">
						<img class="developed_img" src="../image/icon/zhanwunei@2x.png" alt="">
						<span class="developed_span">
						暂无订单~~
					</span>
					</div>
				</div>
			</div>
		</div>
	</body>
	<script type="text/javascript" src="../script/api.js"></script>
	<script type="text/javascript" src="../script/public-head.js"></script>
	<script src="../script/template-web.js"></script>
	<script type="text/javascript" src="../script/mui.js"></script>
	<script type="text/javascript" src="../script/rem.js"></script>
	<!-- 已下单 -->
	<script type="text/html" id="order_templet1">
		{{each data.data as val}}
		<div class="or-1">
			<div class="d1">
				<p>{{val.desc}}</p><span>预计两个小时后完成服务</span></div>
			<div class="d2"><img src="../image/icon/fccxysg@2x.png" /></div>
		</div>
		<div class="btn">
			<div class="btn-1 btn-1-act">
				{{if val.is_pay=="0"}}
				<div onclick="fnCancellationOfOrder({{val.id}})">取消订单</div>
				<div onclick="fntoPayment({{val}})">前往支付</div>
				{{/if}}
			</div>
			<div class="btn-1" tapmode onclick="call()">
				<div>联系客服</div>
			</div>
			<div class="btn-1"></div>
		</div>
		<!-- 洗车 -->
		{{if val.order_usetype==1}}
		<ul class="mui-table-view">
			<li class="mui-table-view-cell mui-collapse">
				<a href="#" class="mui-navigate-right" style="font-size:30px;">
				</a>
				<div class="mui-collapse-content">
					<div class="ord-2">
						<div class="od-1"><img src="../image/icon/fchelogo@2x(1).png" /></div>
						<div class="od-2">{{val.clean_order.plate_number}}</div>
						<div class="od-3"></div>
					</div>
					<div class="order-form">
						<form id="list-outside">
							<div class="outside">
								<div>服务方式</div>
								{{if val.clean_order.orders_type=='self'}}
								<div>智能存取</div>
								{{else if val.clean_order.orders_type=='key'}}
								<div>智能存取</div>
								{{else if val.clean_order.orders_type=='master'}}
								<div>技师开单</div>
								{{else if val.clean_order.orders_type=='shops'}}
								<div>自行到店</div>
								{{/if}}
							</div>
							{{if (val.cabinet_info)!=null}}
							<div class="outside">
								<div>存钥密码</div>
								<div>{{val.cabinet_info.user_savecode}}</div>
							</div>
							<div class="outside">
								<div>钥匙柜</div>
								<div>{{val.cabinet_info.keycabinet_sn}}</div>
							</div>
							{{/if}} {{if val.coupon_name==0}}
							<div class="outside" style="display:none">
								<div>洗车券</div>
								<div>0</div>
							</div>
							{{else}}
							<div class="outside">
								<div>val.coupon_name</div>
								<div>val.coupon_amount</div>
							</div>
							{{/if}}

							<div class="outside">
								<div>支付方式</div>
								{{if val.pay_way=="alipay"}}
								<div>支付宝支付</div>
								{{else if val.pay_way=="wechat"}}
								<div>微信支付</div>
								{{else}}
								<div style="color:red">待支付</div>
								{{/if}}
							</div>

							<div class="outside">
								<div>下单时间</div>
								<div>{{val.created_at}}</div>
							</div>
							<div class="outside">
								<div>订单号</div>
								<div>{{val.order_sn}}</div>
							</div>
							<div class="outside">
								<div></div>
								{{if val.pay_way=="wait"}}
								<div class="money">待支付￥<span>{{val.pay_amount}}</span></div>
								{{else}}
								<div class="money">实付￥<span>{{val.pay_amount}}</span></div>
								{{/if}}
							</div>
						</form>
					</div>

				</div>
			</li>
		</ul>
		<!-- 套餐 -->
		{{else if val.order_usetype==2}}
		<ul class="mui-table-view">
			<li class="mui-table-view-cell mui-collapse">
				<a href="#" class="mui-navigate-right" style="font-size:30px;">

				</a>
				<div class="mui-collapse-content">
					<div class="ord-2">
						<div class="od-1"></div>
						<div class="od-2"></div>
						<div class="od-3"></div>
					</div>

					<div class="order-form">
						<form id="list-outside">
							<div class="outside">
								<div>服务方式</div>
								<div>购买会员</div>
							</div>
							{{each val.coupons as item j}}
							<div class="outside">
								<div>{{item.title}}</div>
								<div>{{item.info}}</div>
							</div>
							{{/each}}
							<div class="outside">
								<div>支付方式</div>
								{{if val.pay_way=="alipay"}}
								<div>支付宝支付</div>
								{{else val.pay_way=="wepay"}}
								<div>微信支付</div>
								{{/if}}
							</div>

							<div class="outside">
								<div>下单时间</div>
								<div>{{val.created_at}}</div>
							</div>
							<div class="outside">
								<div>订单号</div>
								<div>{{val.order_sn}}</div>
							</div>
							<div class="outside">
								<div></div>
								<div class="money">实付￥<span>{{val.pay_amount}}</span></div>
							</div>
						</form>
					</div>

				</div>
			</li>
		</ul>
		{{/if}} {{/each}}
	</script>
	<!-- 待完成 -->
	<script type="text/html" id="order_templet2">
		{{each data as val i}}
		<div class="or-1">
			<div class="d1">
				<p>{{val.clean_order.project_name}}</p><span>预计两小时后完成服务</span></div>
			<div class="d2"><img src="../image/icon/fccxysg@2x.png" /></div>
		</div>
		<div class="btn">
			<div class="btn-1 btn-1-act" onclick="call()" tapmode>
				<div>联系客服</div>
			</div>
			<div class="btn-1">
				<!-- <div>联系客服</div> -->
			</div>
			<div class="btn-1"></div>
		</div>
		<div class="order-order"></div>
		<div class="afterbody">
			<div class="outside">
				<div>服务技师</div>
				<div>{{val.clean_order.master.real_name}}</div>
			</div>
			{{each val.flows as item j}}
			<div class="outside">
				<div>{{item.step_desc}}</div>
				<div>{{item.created_at}}</div>
			</div>
			{{/each}} {{if val.service_state==7}}
			<div class="bott">
				<div class="bott-1-1"></div>
				<div class="bott-2-2 sysle">
					<div><img src="../image/icon/ddwc@2x.png" /></div>
					<div onclick="toComplete({{val.clean_order}})">
						<a>您的订单已完成点击查看订单详情~~</a>
					</div>
				</div>
				<div class="bott-3-3"></div>
			</div>
			{{else}}
			<div class="bott">
				<div class="bott-1"></div>
				<div class="bott-2" onclick="Refrach()">
					<div><img src="../image/icon/shax@2x.png" /></div>
					<div>服务正在跟进更新</div>
				</div>
				{{if val.service_state==7}}
				<div class="bott-2-2 sysle">
					<div><img src="../image/icon/ddwc@2x.png" /></div>
					<div onclick="toComplete({{val.clean_order}})">
						<a>您的订单已完成点击查看订单详情~~</a>
					</div>
				</div>
				{{/if}}
				<div class="bott-3"></div>
			</div>
		</div>
		{{/if}} {{/each}}
	</script>
	<!-- 待评价 -->
	<script type="text/html" id="order_templet3">
		{{each data.data as val i}}
		<ul class="mui-table-view">
			<li class="mui-table-view-cell mui-collapse">
				<a href="#">
					<div class="ore-1">
						<div class="oe-2">
							<div class="img"><label>{{val.clean_order.project_name}}</label><img src="../image/icon/xyjt@2x.png" /><span class="sp">已完成</span></div>
							<div><span class="data"></span></div>
							<div class="mg-thread"><span class="mg">￥{{val.clean_order.project_price}}</span></div>
							<div class="list">
								<button onclick="serviceevaluation({{val.clean_order}})" tapmode>去评价</button>
								<!-- <button class="butt" tapmode onclick="rewardtechnician()">打赏技师</button> -->
								<button class="butt" tapmode onclick="toOpenorder()">再来一单</button>
							</div>
						</div>
					</div>
				</a>
				<div class="mui-collapse-content">
					<div class="order-order"></div>
					<div class="afterbody">
						{{each val.flows as item j}}
						<div class="outside">
							<div>{{item.step_desc}}</div>
							<div>{{item.created_at}}</div>
						</div>
						{{if j==val.flows.length-1}}
						<div class="outside">
							<div style="color:red">期待您的评价</div>
							<div></div>
						</div>
						{{/if}} {{/each}}
						<div class="bott">
							<div class="bott-1-1"></div>
							<div class="bott-2-2 sysle">
								<div><img src="../image/icon/ddwc@2x.png" /></div>
								<div onclick="toComplete({{val.clean_order}})">
									<a>您的订单已完成点击查看订单详情~~</a>
								</div>
							</div>
							<div class="bott-3-3"></div>
						</div>

					</div>
				</div>
			</li>
		</ul>
		{{/each}}
	</script>
	<!-- 历史订单 -->
	<script type="text/html" id="order_templet4">
		{{each data.data as val}}
		<ul class="mui-table-view ul-list">
			<li class="mui-table-view-cell mui-collapse">
				<a href="#">
					<div class="ore-1">
						<div class="oe-2">
							<div class="img"><label>{{val.desc}}</label><img style="display:none" /><span class="sp">已完成</span></div>
							<div><span class="data">{{val.created_at}}</span></div>
							<div class="mg-thread"><span class="mg">￥{{val.pay_amount}}</span></div>
							<div class="list">
								<button tapmode onclick="toOpenorder()">再来一单</button>
								<button class="delete-order" onclick="fnDeleteAnOrder({{val.id}})">删除订单</button>
							</div>
						</div>
					</div>
				</a>
			</li>
		</ul>
		{{/each}}
	</script>

	<script type="text/javascript">
		apiready = function() {
			init();
			// 识别入口
			console.log(api.pageParam.active_index)
			var active_ind = $api.domAll($api.byId('nearby'), ".mui-control-item");
			$api.addCls(active_ind[api.pageParam.active_index], 'mui-active');
			var active_content = $api.domAll($api.byId('mui_content'), ".mui-control-content");
			$api.addCls(active_content[api.pageParam.active_index], 'mui-active');
			//getPar(par);
			Refrach()
		}

		function Refrach() {
			fnMyOrder();
			fnHistoricalOrder();
			fnToBeDone();
			fnToBeEvaluated();
		}
		headInner({
			title: "我的订单",
			//headleft
			headl: '<a href="#" style="color:white" class="mui-icon mui-icon-left-nav" tapmode onclick="api.closeWin()"></a>',
			//headright
			headr: '<a style="color:white"></a>',
			color: "", //默认是蓝色
			padding: "0px 0px 0px",
		})

		// 获取我的订单列表已下单
		function fnMyOrder() {
			// console.log("下单______________");
			BASE.MYajax({
				'pathName': 'order/index',
				'ajaxData': {
					values: {
						page: 1, //当前页数
						state: "created" //已下单：created ，待完成：serving ，待评价：comments ，历史：records，
					}
				},
				'method': getAnOrder
			});
		}

		function getAnOrder(ret, err) {
			// console.log("已下单已下单11111"+JSON.stringify(ret));
			if(ret.code == 200) {
				// console.log("已下单" + JSON.stringify(ret));
				if(ret.data.data.length > 0) {
					var html = template('order_templet1', ret);
					document.getElementById('order1').innerHTML = html;
				}
			} else {
				reToast(ret, err)
			}
		}

		//待完成
		var DataLength = 0;

		function fnToBeEvaluated() {
			BASE.MYajax({
				'pathName': 'order/index',
				'ajaxData': {
					values: {
						page: 1, //当前页数
						state: "serving" //已下单：created ，待完成：serving ，待评价：comments ，历史：records，
					}
				},
				'method': evaluated
			});
		}

		function evaluated(ret, err) {
			if(ret.code == 200 || ret.code == 251) {
				if(ret.data.data.length > 0) {
					var html = template('order_templet2', ret.data);
					document.getElementById('order2').innerHTML = html;
				}

			} else {
				reToast(ret, err)
			}
		}

		//待评价
		function fnToBeDone() {
			BASE.MYajax({
				'pathName': 'order/index',
				'ajaxData': {
					values: {
						page: 1, //当前页数
						state: "comments" //已下单：created ，待完成：serving ，待评价：comments ，历史：records，
					}
				},
				'method': wait
			})
		};

		function wait(ret, err) {

			if(ret.code == 200 || ret.code == 251) {
				if(ret.data.data.length > 0) {
					var html = template('order_templet3', ret);
					document.getElementById('order3').innerHTML = html;
				}
			} else {
				reToast(ret, err)
			}
		}

		//历史订单
		function fnHistoricalOrder() {
			// console.log("下单______________");
			BASE.MYajax({
				'pathName': 'order/index',
				'ajaxData': {
					values: {
						page: 1, //当前页数
						state: "records" //已下单：created ，待完成：serving ，待评价：comments ，历史：records，
					}
				},
				'method': historical
			});

			function historical(ret, err) {
				if(ret.code == 200 || ret.code == 251) {
					if(ret.data.data.length > 0) {
						var html = template('order_templet4', ret);
						document.getElementById('order4').innerHTML = html;
					}

				} else {
					reToast(ret, err)
				}

			}
		}
		//获取支付状态

		//取消订单
		function fnCancellationOfOrder(order_id) {
			BASE.MYajax({
				'pathName': 'order/releaseOrder',
				'methods': 'post',
				'ajaxData': {
					values: {
						orders_id: order_id
					}
				},
				'method': cancel
			});
		}

		function cancel(ret, err) {
			if(ret.code == 200) {
				api.toast({
					msg: ret.message,
					duration: 2000,
					location: 'bottom'
				});
				fnMyOrder()
			} else {
				reToast(ret, err)
			}
		}

		//删除订单
		function fnDeleteAnOrder(or_id) {
			console.log(or_id);
			BASE.MYajax({
				'pathName': 'order/deleteOrder',
				'methods': 'post',
				'ajaxData': {
					values: {
						orders_id: or_id
					}
				},
				'method': deleteList
			});
		}

		function deleteList(ret, err) {
			if(ret.code == 200) {
				api.toast({
					msg: ret.message,
					duration: 2000,
					location: 'bottom'
				});
				fnHistoricalOrder()
			} else {
				reToast(ret, err)
			}
		}

		function toComplete(or_infor) {
			api.openWin({
				name: 'ServiceCompletion',
				url: '../html/ServiceCompletion.html',
				pageParam: {
					orderInfo: or_infor
				}
			});

		}

		// 支付待支付订单
		function fntoPayment(order_payinfo) {
			api.openWin({
							name: 'online-payment_2',
							url: '../html/online-payment_2.html',
							pageParam: {
									// 1单号,2下单时间,3单号ID,4支付金额,5到店下单或者钥匙柜下单6优惠券id,7服务项目
									order_num: order_payinfo.order_sn,
									created_order:order_payinfo.created_at,
									OrderId:order_payinfo.id,
									Service_price: order_payinfo.pay_amount,
									ser_way: order_payinfo.order_type,
									coupon_id: order_payinfo.coupon_id,
									project: order_payinfo.desc
							}
					})
		}

		//跳转
		function Main_Frame() {
			api.openWin({
				name: 'Main_Frame',
				url: '../html/Main_Frame.html'
			});
		}

		function toOpenorder() {
			api.openWin({
				name: 'order-details_1',
				url: './order-details_1.html',
				pageParam: {
					pid: 2
				}
			});

		}

		function serviceevaluation(order_info) {
			api.openWin({
				name: 'service-evaluation',
				url: '../html/service-evaluation.html',
				pageParam: {
					orderInfo: order_info
				}
			});
		}

		function rewardtechnician() {
			// api.openWin({
			// 	name: 'reward-technician',
			// 	url: '../html/reward-technician.html'
			// });
			api.openWin({
				name: 'ServiceCompletion',
				url: '../html/ServiceCompletion.html',
				pageParam: {
					name: 'test'
				}
			});

		}

		function customer_feedback() {
			api.openWin({
				name: 'customer-service-feedback',
				url: '../html/customer-service-feedback.html'
			});
		}

		function call() {
			api.call({
				type: 'tel_prompt',
				number: "400-111-0771"
			});
		};
	</script>

</html>
